<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="template.js"></script>
        <script type="text/javascript" src="generate.js"></script>
        <script type="text/javascript" src="btn-more.js"></script>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="busuanzi.pure.mini.js"></script>
        <link rel="stylesheet" type="text/css" href="mqtt-tools.css">
        <title>mqttclient代码生成工具</title>
        <!-- <link rel="stylesheet" type="text/css" href="bootstrap.css"> -->
        <title></title>
    </head>
    <body onload="body_onload()"> 
        <div class="heading-center">
            <h1 align="center">欢迎使用mqttclient代码生成工具</h1>
            <p align="center" style="color: black;">开源地址：<strong><a href="https://github.com/jiejieTop/mqttclient">https://github.com/jiejieTop/mqttclient</a></strong>.</p>
        </div>

        <div class="button-more">
            <button type="button" id="btnMorePubTopic" name="btnMorePubTopic" onclick="window.location.href='mqtt-config.html'" class="btn btn-outline-primary">MQTT裁剪配置工具</button>
        </div>
        
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">连接配置</div>
        </div>
        <div class="wrapper-all" id="connectConfig">
            <div class="wrapper">
                <div class="left">
                    <div class="connection1">
                        <div class="form-group">
                            <label for="brokerAddress">服务器地址 *</label>
                            <input type="text" class="form-control" id="brokerAddress" name="host" placeholder="brokerAddress">
                        </div>
                    
                        <div class="form-group">
                            <label for="brokerPort">端口号 *</label>
                            <input type="text" class="form-control" id="brokerPort" name="port" placeholder="brokerPort">
                        </div>

                        <div class="form-group">
                            <label for="brokerCA">CA证书</label>
                            <div class="input-group mb-3">
                                <div class="custom-file">
                                    <label class="custom-file-label" for="brokerCA" id="inputFileLable">选择证书文件</label>
                                    <input type="file" class="custom-file-input" id="brokerCA" value='' name="ca" accept="*/*" onchange="handle_files(this.files)">
                                </div>
                                <div class="input-group-append">
                                    <label class="input-group-text" id="removeCA" onclick="remove_ca_files()">Remove</span>
                                </div>
                            </div>
                        </div>
                    
                        <div class="form-group">
                            <label for="mqttVersion">MQTT版本</label>
                            <select type="text" class="form-control" id="mqttVersion" name="version">
                            <option value=''>MQTT 3.1.1</option>     <!-- 默认值不需要生成代码 -->
                            <option value='3'>MQTT 3.1</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="middle">
                    <div class="connection1">
                        <div class="form-group">
                            <label for="userName">用户名</label>
                            <input type="text" class="form-control" id="userName" name="user_name" placeholder="userName">
                        </div>
                    
                        <div class="form-group">
                            <label for="password">密码</label>
                            <input type="text" class="form-control" id="password" name="password" placeholder="password">
                        </div>
                    
                        <div class="form-group">
                            <label for="clientID">客户端ID</label>
                            <input type="text" class="form-control" id="clientID" name="client_id" placeholder="clientID">
                        </div>

                        <div class="form-group" id = settingFlag>
                            <input style="vertical-align:middle" type="checkbox" id="cleanSession" name="clean_session" value="1" checked="">清除会话</input>
                            <input style="vertical-align:middle" type="checkbox" id="willFlag" name="will_flag" value="0" onclick="checkbox_set_will()">设置遗嘱</input>
                        </div>

                    </div>  
                </div>

                <div class="right">
                    <div class="connection-jiejie">
                        <div class="form-group">
                            <label for="keepAliveInterval">心跳（秒）</label>
                            <input type="text" class="form-control" id="keepAliveInterval" name="keep_alive_interval" placeholder="50">
                        </div>
                    
                        <div class="form-group">
                            <label for="cmdTimeout">超时（毫秒）</label>
                            <input type="text" class="form-control" id="cmdTimeout" name="cmd_timeout" placeholder="4000">
                        </div>
                    
                        <div class="form-group">
                            <label for="readBufSize">读缓冲区大小</label>
                            <input type="text" class="form-control" id="ReadBufSize" name="read_buf_size" placeholder="1024">
                        </div>
                    
                        <div class="form-group">
                            <label for="writeBufSize">写缓冲区大小</label>
                            <input type="text" class="form-control" id="WriteBufSize" name="write_buf_size" placeholder="1024">
                        </div>
                    </div> 
                </div>
            </div>
        </div>

        <div id = setWill></div>

        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">订阅主题</div>
        </div>

        <div class="wrapper-all">
            <div class="wrapper">
                <div class="all">
                    <div class="connection2">
                        <div class="form-group1">
                            <label for="subTopic1">主题名字</label>
                            <input type="text" class="form-control" id="subTopic1" name="sub_topic1" placeholder="topicName">
                        </div>

                        <div class="form-group1">
                            <label for="subTopicQos1">服务质量</label>
                            <select type="text" class="form-control" id="subTopicQos1" name="sub_topic_qos1">
                                <option value="QOS0">QoS0</option>
                                <option value="QOS1">QoS1</option>
                                <option value="QOS2">QoS2</option>
                            </select>
                        </div>

                        <div class="form-group1">
                            <label for="subTopicHandle1">主题处理函数</label>
                            <input type="text" class="form-control" id="subTopicHandle1" name="sub_topic_handle1" value="NULL"
                                   onfocus = "if (value == 'NULL') {value = ''}" onblur = "if (value == '') {value = 'NULL'}"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id = addMoreSubTopic></div>

        <div class="button-more">
            <button type="button" id="btnMoreSubTopic" name="btnMoreSubTopic" onclick="btn_more_sub_topic()" class="btn btn-outline-primary">添加更多</button>
        </div>

        <div class=" progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">发布主题</div>
        </div>

        <div class="wrapper-all">
            <div class="wrapper">
                <div class="all">
                    <div class="connection2">
                        <div class="form-group1">
                            <label for="pubTopic1">主题名字</label>
                            <input type="text" class="form-control" id="pubTopic1" name="pub_topic1" placeholder="topicName">
                        </div>

                        <div class="form-group1">
                            <label for="pubTopicQos1">服务质量</label>
                            <select type="text" class="form-control" id="pubTopicQos1" name="pub_topic_qos1">
                                <option value="0">QoS0</option>
                                <option value="1">QoS1</option>
                                <option value="2">QoS2</option>
                            </select>
                        </div>

                        <div class="form-group1">
                            <label for="pubTopicMessage1">发布的消息</label>
                            <textarea type="text" class="form-control1" id="pubTopicMessage1" name="pub_topic_message1" value='NULL' rows="1"
                                      onfocus = "if (value == 'NULL') {value = ''}" onblur = "if (value == '') {value = 'NULL'}" ></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id = addMorePubTopic></div>

        <div class="button-more">
            <button type="button" id="btnMorePubTopic" name="btnMorePubTopic" onclick="btn_more_pub_topic()" class="btn btn-outline-primary">添加更多</button>
        </div>

        <div class=" progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">生成代码</div>
        </div>

        <div class="wrapper1">
            <button type="button" id="importTemplate" name="importTemplate" onclick="import_template()" class="btn btn-primary">导入模板</button>
            <button type="button" id="generate" name="generate" onclick="generate_code()" class="btn btn-primary">生成代码</button>
        </div>


        <div class="wrapper-all">
            <div class="wrapper">
                <div class="all">
                    <div class="connection">
                        <div class="form-group">
                            <label for="generateCode">生成的代码（将生成的代码拷贝到main.c文件）</label>
                            <textarea class="form-control1" id="generateCode" rows="10"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class=" progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">API接口说明</div>
        </div>

        <div class="wrapper-table">
            <table class="table table-hover">
                <thead>
                    <tr class="table-active">
                        <th scope="col">API</th>
                        <th scope="col">说明</th>
                        <th scope="col">示例</th>
                    </tr>
                </thead>
                <tbody id="addTable" name="addTable">
                <tbody>
            </table>
        </div>
        <div class="statistics">
            <span id="busuanzi_container_site_pv">
                本站总访问量<span style="color:red" id="busuanzi_value_site_pv" ></span>次
            </span>
        </div>
        <br>
        <script type="text/javascript">

            var Ajax = function ()
            {
                $.getJSON ("api.json", function (data){
                    $.each (data, function (i, item){
                        var obj = document.getElementById("addTable");
                        obj.insertAdjacentHTML("beforeend", get_more_table_template(i, item));
                    });
                });
            }();

            function body_onload() {
                $("#pubTopicMessage1").val("NULL");
                sup_topic_id = 1;
                pup_topic_id = 1;
            }

            function import_template() {
                do_import_template();
            }

            function generate_code() {
                get_value();
                if (addr == "" || port == "") {
                    alert("服务器地址与端口号必须填写");
                    return;
                }
                $("#generateCode").val(do_generate_code());
            }

            function btn_more_sub_topic() {
                sup_topic_id ++;
                if (sup_topic_id > 10) {
                    alert("代码生成工具最多支持配置10个订阅主题，您可以手动编写代码以实现更多的发布主题！");
                    return;
                }
                var obj = document.getElementById("addMoreSubTopic");
                obj.insertAdjacentHTML("beforebegin", get_more_sub_topic(sup_topic_id));
            }

            function btn_more_pub_topic() {
                pup_topic_id ++;
                if (pup_topic_id > 10) {
                    alert("代码生成工具最多支持配置10个发布主题，您可以手动编写代码以实现更多的发布主题！");
                    return;
                }
                var obj = document.getElementById("addMorePubTopic");
                obj.insertAdjacentHTML("beforebegin", get_more_pub_topic(pup_topic_id));
                refresh_pub_topic_message(pup_topic_id);
            }

            function checkbox_set_will() {
                var flag = document.getElementById("willFlag").checked;
                var value = document.getElementById("willFlag").value;

                if (flag == true) {
                    $("#willFlag").val(1);
                    var obj = document.getElementById("settingFlag");
                    obj.insertAdjacentHTML("beforeend", will_retain_flag);

                    obj = document.getElementById("setWill");
                    obj.insertAdjacentHTML("beforeend", will_setting);
                } else {
                    $("#willFlag").val(0);
                    var obj = document.getElementById("settingFlag");
                    // var len = obj.childElementCount;
                    obj.removeChild(obj.lastChild);
                    obj.removeChild(obj.lastChild);

                    obj = document.getElementById("setWill");
                    obj.removeChild(obj.lastChild);
                }
            }

            function handle_files(files) {
                if(files.length){
                    let file = files[0];

                    var obj = document.getElementById("inputFileLable");
                    obj.innerHTML = file.name;

                    let reader = new FileReader();
                    reader.onload = function() {
                        ca_file_str = this.result;
                    };
                    reader.readAsText(file);
                }
            }

            function remove_ca_files() {
                console.log("remove_ca_files");
                var obj = document.getElementById("inputFileLable");
                obj.innerHTML = '选择证书文件';
                ca_file_str = '';
            }
        </script>
    </body>
</html>



